<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- 3. 使用组件 -->
        <!-- 自定义的组件，可以单标签写法也可以支持双标签写法 -->
        <!-- <Mycom></Mycom> -->
        <Mycom />

    </div>
</body>
<script>

    // 1. 声明一个组件
    // 组件中的选项，和我们之前 app 中的选项是一模一样的
    const myCom = {
        // 组件模板
        template: `<h1>{{msg}}</h1>`,
        // 组件的数据
        data () {
            return {
                msg: '有些闲言碎语 ，之所以听了格外难受，是因为他们说的是对的。'
            }
        },
        // 组件中的函数
        methods: {

        },
    }


    const app = Vue.createApp({
        data () {
            return {}
        },
        // 2. 注册局部组件
        components: {
            //  这里可以注册组件，可以注册多个组件
            // 大写字母开头是可以使用的
            Mycom: myCom
            // 全部小写是可以使用的
            // mycom: myCom
            // 连接符的方式是可以使用的
            // 'my-com': myCom
            // 大驼峰不能使用
            // MyCom: myCom
            // 小驼峰不能使用
            // myCom: myCom
        }
    })
    app.mount('#app')

</script>

</html>